.packages-step__dialog-package-option {
	font-weight: normal;
	margin-bottom: 10px;
}

.packages-step__dialog-package-name {
	font-weight: bold;
}

.packages-step__contents {
	display: flex;
	padding-bottom: 24px;
	flex-direction: column;

	@include breakpoint( '>960px' ) {
		flex-direction: row;
	}
}

.packages-step__list {
	width: auto;
	padding: 0 0 24px;
	flex-shrink: 0;

	@include breakpoint( '>960px' ) {
		flex-direction: row;
		width: 35%;
		padding: 0 24px 0 0;
	}
}

.packages-step__list-header {
	font-weight: 600;
	margin-bottom: 5px;
}

.packages-step__list-package {
	display: flex;
	padding: 6px 12px;
	cursor: pointer;
	align-items: center;
	width: 100%;

	&.is-selected {
		background-color: var( --color-neutral-0 );
	}

	.gridicon {
		top: 0;
	}
}

.packages-step__list-package-name {
	flex-grow: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: 2px;
	text-align: left;
	color: var( --color-text );
}

.packages-step__list-package-count {
	display: inline-block;
	padding: 1px 6px;
	border: solid 1px var( --color-neutral-20 );
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	line-height: 14px;
	color: var( --color-text );
	text-align: center;
}

.packages-step__package {
	flex-grow: 1;

	> div {
		margin-bottom: 24px;

		&:last-child {
			margin-bottom: 0;
		}
	}
}

.packages-step__add-item-row {
	padding: 8px 0;
	display: flex;
}

.packages-step__no-items-message {
	padding: 8px 0;
	font-style: italic;
	flex-grow: 1;
}

.packages-step__no-items-message .packages-step__add-item-btn {
	vertical-align: middle;
	margin-left: 8px;
}

.packages-step__package-item-description {
	font-weight: bold;
}

.packages-step__package-items-header {
	display: flex;
}

.packages-step__item {
	display: flex;
	padding: 0 0 8px;

	&:last-child {
		padding-bottom: 0;
	}
}

.packages-step__item-name {
	flex-grow: 1;
	padding: 8px 0;
}

.packages-step__item-move {
	margin: 4px 0 4px 16px;
}

.packages-step__package-weight {
	width: 180px;
	margin-bottom: 10px;
	float: left;
	margin-right: 15px;

	input {
		min-width: 0;
	}
}

.packages-step__package-weight-unit {
	margin-left: 8px;
}

.packages-step__package-signature {
	width: 180px;
	float: left;
}
